<template>
	<view class="flex-col page">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<u-icon name="arrow-left" class="back" color="#707070" size="40" @click="pageBack">
		</u-icon>
		<view class="flex-col group">
			<text class="text">注册</text>
			<text class="text_1">请输入手机号密码注册</text>
			<view class="flex-col group_1">
				<view class="flex-row section_1">
					<u-icon name="account" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
					<input style="font-size: 28rpx;" type="number" v-model="form1.mobile" :maxlength="11"
						placeholder="请输入您的手机号" placeholder-class="input-placeholder" />
				</view>
				<view class="justify-between section_2">
					<view class="flex-row group_2">
						<u-icon name="email" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
						<input style="font-size: 28rpx;" type="number" v-model="form1.code" placeholder="验证码"
							placeholder-class="input-placeholder" />
					</view>
					<view class="flex-col text-wrapper">
						<vk-u-verification-code seconds="60" :mobile="form1.mobile" type="register">
						</vk-u-verification-code>
					</view>
				</view>
				<view class="section_3 flex-row">
					<u-icon name="lock" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
					<input style="font-size: 28rpx;" type="text" password v-model="form1.password"
						placeholder="请输入您的登录密码" placeholder-class="input-placeholder" />
				</view>
				<view class="section_3 flex-row">
					<u-icon name="lock" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
					<input style="font-size: 28rpx;" type="text" password v-model="form1.password2"
						placeholder="请再次输入您的登录密码" placeholder-class="input-placeholder" />
				</view>
			</view>
			<view class="flex-col items-center button" @click="loginBySms">
				<text>注册</text>
			</view>
			<view class="flex-row group_3">
				<u-checkbox v-model="form1.agreement" active-color="#FF960C" shape="circle" class="check_box">
					<view class="group_4">
						<text class="text_9">我已认真阅读并同意</text>
						<text class="text_10">
							<text @click.stop="pageTo('./privacy?type=2')">《用户须知及使用协议》</text>、
							<text @click.stop="pageTo('./privacy?type=1')">《隐私政策》</text>
						</text>
					</view>
				</u-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data: {

				},
				// 表单请求数据
				form1: {
					agreement: false,
					mobile: "",
					password: "",
					password2: "",
					code: "",
					type: "register",
					inviteCode: getApp().globalData.invite
				},
				scrollTop: 0,
				isRotate: false,
				logoImage: "/static/logo.png",
			}
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options) {
			that = this;
			vk = that.vk;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {


		},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听 - 页面触底部
		onReachBottom() {

		},
		// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
		onResize() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 监听 - 页面创建时
		created() {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options = {}) {
				console.log("init: ", options);
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 登录(手机号+验证码) 不存在会自动注册
			loginBySms() {
				if (that.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				const {
					agreement,
					mobile,
					code,
					password,
					password2
				} = that.form1;
				if (!agreement) {
					vk.toast('请阅读并同意用户服务及隐私协议', "none");
					return;
				}
				if (!vk.pubfn.checkStr(mobile, 'mobile')) {
					vk.toast('请输入正确的手机号码', "none");
					return;
				}
				if (!vk.pubfn.checkStr(code, 'mobileCode')) {
					vk.toast('验证码格式为6位数字', "none");
					return;
				}
				if (!vk.pubfn.checkStr(password, 'pwd')) {
					vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
					return;
				}
				if (!vk.pubfn.checkStr(password2, 'pwd')) {
					vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
					return;
				}
				if (password != password2) {
					vk.toast('两次密码必须相同!', "none");
					return;
				}

				that.isRotate = true;
				vk.userCenter.loginBySms({
					data: that.form1,
					success: function(data) {
						that.isRotate = false;
						if (data.type == "login") {
							vk.toast("登录成功!");
							setTimeout(function() { that.jump() }, 1000)
						} else {
							vk.toast("注册成功!");
							// 第一次注册成功添加学习币参数及支付密码
							vk.userCenter.updateUser({
								data: { coin: '0', username: 'user' + mobile },
								success: function(data) { that.jump() }
							})
						}
					},
					complete: function() {
						that.isRotate = false;
					}
				})
			},
			jump() {
				// 跳转到首页,或页面返回
				var pages = getCurrentPages();
				vk.switchTab("/pages/index/homePage");
			},
		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.back {
			padding: 30rpx 20rpx 0;
			height: 11.5vw;
		}

		.group {
			padding: 18rpx 30rpx 0;
			flex: 1 1 auto;
			overflow-y: auto;

			.text {
				color: rgb(51, 51, 51);
				font-size: 42rpx;
				line-height: 50rpx;
				letter-spacing: 2.1rpx;
				white-space: nowrap;
				font-weight: bold;
			}

			.text_1 {
				margin-top: 47rpx;
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.group_1 {
				margin-top: 60rpx;

				.section_1 {
					padding: 34rpx 60rpx 32rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
					background-color: rgb(255, 255, 255);
					border-radius: 50rpx;

					.image_2 {
						margin-bottom: 3rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.text_2 {
						margin-left: 12rpx;
					}
				}

				.section_2 {
					margin-top: 40rpx;
					padding-left: 62rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50rpx;

					.group_2 {
						align-self: center;
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;

						.image_3 {
							margin-bottom: 3rpx;
							width: 26rpx;
							height: 30rpx;
						}

						.text_3 {
							margin-left: 14rpx;
						}
					}

					.text-wrapper {
						padding: 34rpx 20rpx;
						color: rgb(255, 255, 255);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
						background-color: rgb(51, 51, 51);
						border-radius: 0px 50rpx 50rpx 0px;
						height: 100rpx;
					}
				}

				.section_3 {
					margin-top: 40rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
					padding: 34rpx 64rpx 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50rpx;

					.image_4 {
						margin-bottom: 3rpx;
						width: 23rpx;
						height: 30rpx;
					}

					.text_5 {
						margin-left: 16rpx;
					}
				}
			}

			.button {
				margin-top: 68rpx;
				padding: 32rpx 0 30rpx;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;
				background-color: rgb(51, 51, 51);
				border-radius: 50rpx;
			}

			.group_3 {
				margin-top: 29rpx;
				padding: 12rpx;

				.check_box {
					width: 100%;
				}

				/deep/ .u-checkbox__label {
					width: 100%;
				}

				.group_4 {
					margin-left: 10rpx;
					line-height: 32rpx;
					text-align: left;

					.text_9 {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						line-height: 33rpx;
					}

					.text_10 {
						color: rgb(255, 150, 12);
						font-size: 28rpx;
						line-height: 33rpx;
					}
				}
			}
		}
	}
</style>
